<template>
  <div
    id="app"
    class="app"
    :class="isMobile ? 'mobile-app' : 'pc-app'"
    :style="$route.name == 'home' ? '' : 'height: 100vh'"
  >
    <component :is="isMobile ? 'mHead' : 'vHead'" class="head"></component>
    <!-- <v-head class="head"></v-head> -->
    <div class="content-box">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
    </div>
    <component :is="isMobile ? 'mDrawerList' : 'drawerList'"></component>
    <!-- <drawer-list></drawer-list> -->
    <!-- <player-bar v-if="!$route.meta.isLogin"></player-bar> -->
    <!-- <v-foot v-if="!$route.meta.isLogin"></v-foot> -->
    <el-backtop target="#app" :bottom="150" :right="isMobile ? 5 : 150">
      <div class="to-top"><i class="el-icon-top"></i></div>
    </el-backtop>
    <div class="footer">
      <p class="footer-one">
        <img src="./assets/images/foot-logo.png" />
        <span></span>
        <img src="./assets/images/foot-naxos.png" />
        <span>|</span>
        <img src="./assets/images/foot-creation.png" />
      </p>
      <p class="footer-two">
        <a href="http://www.kuke.com/aboutus" target="_self">关于我们</a>
        <span>|</span
        ><a href="http://www.kuke.com/privacy" target="_self">隐私声明</a>
        <span>|</span
        ><a href="http://www.kuke.com/business" target="_self">商务合作</a>
        <span>|</span
        ><a href="http://www.kuke.com/copyright" target="_self">版权信息</a>
        <span>|</span
        ><a href="http://www.kuke.com/contactus" target="_self">联系我们</a>
        <span>|</span
        ><a href="http://www.kuke.com/advise" target="_self">意见反馈</a>
      </p>
      <p>
        <a href="http://www.kuke.com/network" target="_blank"
          >信息网络传播视听节目许可证</a
        >
        <span></span
        ><a href="http://www.kuke.com/production" target="_blank"
          >广播电视节目制作经营许可证</a
        >
        <span></span
        ><a href="http://www.kuke.com/publish" target="_blank"
          >中华人民共和国互联网出版许可证</a
        >
      </p>
      <p>
        <a href="http://www.kuke.com/culture" target="_blank"
          >京网文（2021）4667-1083号</a
        >
        <span></span
        ><a
          href="http://www.itrust.org.cn/home/index/wx_certifi/wm/1171774136.html"
          rel="nofollow"
          target="_blank"
          >中华互联网协会网络诚信推荐联盟</a
        >
      </p>
      <p>
        <a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502039943"
          target="_blank"
          ><i class="police-icon" style="width: 20px; height: 20px"></i>
          京公网安备 11010502039943号
        </a>
        <span></span>
        <a href="http://www.kuke.com/icp" target="_blank">京ICP证030879号</a>
        <span></span>
        <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"
          >京ICP备09081529号-4</a
        >
      </p>
      <p>
        <span>© 2002-2021 kuke.com 版权所有</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>COPYRIGHT KUKE.COM.ALL RIGHTS RESERVED</span>
      </p>
      <p>v4.3.2</p>
    </div>
  </div>
</template>
<script>
import vHead from "@/components/common/header/Index"
import mHead from "@/components/common/header/m-Index"
import drawerList from "@/components/common/drawerList/Index"
import mDrawerList from "@/components/common/drawerList/m-Index"
// import PlayerBar from 'components/common/playerBar/Index'
// import vFoot from "./components/common/footer/Index";
import browser from "@/common/browser"
import "@/assets/styles/style.css"
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload,
    }
  },
  components: {
    vHead,
    mHead,
    drawerList,
    mDrawerList,
    // vFoot,
    // PlayerBar
  },

  data() {
    return {
      scalseNum: 1,
      isRouterAlive: true,
    }
  },
  computed: {
    isMobile() {
      return this.$store.getters.isMobile
    },
  },
  created() {
    this.changeIsMobileFlag()
    if (browser.isMobile) {
      // this.$store.commit("IS_MOBILE", true);
      if (browser.isAndroid) {
        this.$store.commit("IS_AND_OR_IOS", "android")
      } else if (browser.isiOS) {
        this.$store.commit("IS_AND_OR_IOS", "ios")
      }
    } else {
      if (browser.isIE) {
        this.$store.commit("IS_IE", true)
      }
    }
  },

  mounted() {
    //计算缩放比例
    this.resize_window()
    window.addEventListener("resize", () => {
      this.resize_window()
      this.changeIsMobileFlag()
    })
  },

  methods: {
    resize_window() {
      let mywidth = document.documentElement.clientWidth

      this.scalseNum = mywidth / 1920
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    changeIsMobileFlag() {
      if (
        document.documentElement.clientWidth <= 750 &&
        !this.$store.getters.isMobile
      ) {
        this.$store.commit("IS_MOBILE", true)
      } else if (
        document.documentElement.clientWidth > 750 &&
        this.$store.getters.isMobile
      ) {
        this.$store.commit("IS_MOBILE", false)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
#app {
  width: 100%;
  // height: 100vh; /*vh:代表着屏幕高度，100vh表示100%屏幕高度*/
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  // -ms-overflow-y: auto;
  /*三角箭头的颜色*/
  scrollbar-arrow-color: #fff;
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: #fff;
  /*滚动条整体颜色*/
  scrollbar-highlight-color: #fff;
  /*滚动条阴影*/
  scrollbar-shadow-color: #fff;
  /*滚动条轨道颜色*/
  scrollbar-track-color: #fff;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color: #fff;
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: #fff;
  /*滚动条基准颜色*/
  scrollbar-base-color: #fff;
  .footer {
  }
}
</style>
